<template>
  <div>
    <Dialog
      ref="Drawer"
      @close="close"
      :loading="loading"
      @handleSave="handleSave"
      :title="title"
      :dialog="dialog"
    >
      <template #content>
        <el-form
          :model="ruleForm"
          size="small"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          label-position="top"
          class="demo-ruleForm"
        >
          <el-row :gutter="20">
            <el-col
              :span="12"
              v-if="ruleForm.parentId"
            >
              <el-form-item
                label="上级菜单"
                prop="parentName"
              >
                {{ruleForm.parentName}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="菜单名称"
                prop="name"
              >
                <el-input
                  v-model="ruleForm.name"
                  placeholder="请输入菜单名称"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="菜单编码"
                prop="perms"
              >
                <el-input
                  v-model="ruleForm.perms"
                  placeholder="请输入菜单编码"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="菜单路由"
                prop="url"
              >
                <el-input
                  v-model="ruleForm.url"
                  placeholder="请输入菜单路由"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col
              :span="12"
              v-if="userInfo.type != 'admin'"
            >
              <el-form-item
                label="工作组"
                prop="sysFlag"
              >
                <el-select
                  class="w100p"
                  v-model="ruleForm.sysFlag"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in menusType"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="排序号"
                prop="sortNum"
              >
                <el-input
                  v-model="ruleForm.sortNum"
                  placeholder="请输入排序号"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="菜单类型"
                prop="type"
              >
                <el-radio-group v-model="ruleForm.type">
                  <el-radio label="base">菜单</el-radio>
                  <el-radio label="button">按钮</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>

          </el-row>

        </el-form>
      </template>
    </Dialog>
  </div>
</template>
<script>
import Dialog from "@/components/Dialog";
import * as settingApi from "@/api/setting1";
import { getUserInfo } from "@/utils/auth";
export default {
  components: {
    Dialog,
  },
  data() {
    const validateName = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入菜单名称"));
      } else if (
        value &&
        !/^[A-Za-z0-9]{1,50}$|^[\u4e00-\u9fa5A-Za-z0-9]{1,25}$/.test(value)
      ) {
        callback(new Error("菜单名称不超过50个英文字符或25个汉字"));
      } else {
        callback();
      }
    };
    const validateMenuOrdernum = (rule, value, callback) => {
      if (value && !/^[0-9]*$/.test(value)) {
        callback(new Error("请输入正确数字"));
      } else if (value && value.length > 10) {
        callback(new Error("排序不超过50个英文字符"));
      } else {
        callback();
      }
    };
    const validatePerms = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入菜单编码"));
      } else if (value && !/^[A-Za-z_]{1,50}$/.test(value)) {
        callback(new Error("菜单编码不超过50个英文字符"));
      } else {
        callback();
      }
    };
    const validateUrl = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入菜单路由"));
      } else if (value && !/^[A-Za-z \/]{1,50}$/.test(value)) {
        callback(new Error("菜单路由不超过50个字符"));
      } else {
        callback();
      }
    };
    return {
      dialog: false, //弹框
      rules: {
        //form表单非空校验
        name: [
          {
            required: true,
            validator: validateName,
            trigger: "blur",
          },
        ],
        perms: [
          {
            required: true,
            validator: validatePerms,
            trigger: "blur",
          },
        ],
        url: [
          {
            required: true,
            validator: validateUrl,
            trigger: "blur",
          },
        ],
        type: [
          {
            required: true,
            message: "请选择菜单类型",
            trigger: "change",
          },
        ],

        sortNum: [
          {
            validator: validateMenuOrdernum,
            trigger: "blur",
          },
        ],
      },
      menusType: [
        //工作组
        // （admin：监管端，hospital：医院端，staff：员工APP）
        {
          label: "医院端",
          value: "hospital",
        },
        {
          label: "员工AP",
          value: "staff",
        },
      ],
      userInfo: {},
      ruleForm: {
        //表单提交
        id: "",
        perms: "",
        name: "",
        sortNum: 0,
        url: "",
        parentId: "",
        sysFlag: "hospital",
        type: "base", //菜单类型（base：基础，button：按钮）
        parentName: "",
      },
      formLabelWidth: "100px", //表单label宽度
      loading: false, //表单提交按钮
      passwordType: "password",
      title: "",
    };
  },
  methods: {
    //弹框关闭
    close() {
      this.dialog = false;
    },
    showPwd() {
      if (this.passwordType === "password") {
        this.passwordType = "";
      } else {
        this.passwordType = "password";
      }
      this.$nextTick(() => {
        this.$refs.password.focus();
      });
    },
    //初始化弹框
    showModal(_type, _level, _row) {
      this.dialog = true;
      this.userInfo = getUserInfo() ? JSON.parse(getUserInfo()) : {};
      this.$nextTick((_) => {
        this.$refs.ruleForm.resetFields();
        this.ruleForm.parentName = "";
        this.ruleForm.parentId = "";
        this.ruleForm.id = "";
        if (_type == "edit") {
          this.ruleForm = JSON.parse(JSON.stringify(_row));
          this.ruleForm.parentName = _row.parentName;
          if (_row.parentId) {
            //编辑子级菜单
            this.title = "编辑子级菜单";
          } else {
            //编辑一级菜单
            this.title = "编辑菜单";
          }
        } else if (_type == "add") {
          if (_level == "sub") {
            //添加子级菜单
            this.title = "添加子级菜单";
            this.ruleForm.parentName = _row.name;
            this.ruleForm.parentId = _row.id;
          } else {
            // 添加一级菜单
            this.title = "新增菜单";
          }
        }
      });
    },
    //提交保存
    handleSave() {
      this.loading = true;
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.ruleForm.sysFlag =
            this.userInfo.type == "admin" ? "admin" : this.ruleForm.sysFlag;
          settingApi
            .saveMenus(this.ruleForm)
            .then((res) => {
              if (res && res.success) {
                this.loading = false;
                this.dialog = false;
                this.$emit("getDataList");
              } else {
                this.loading = false;
              }
            })
            .catch((e) => {
              this.loading = false;
            });
        } else {
          this.loading = false;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
$dark_gray: #889aa4;
.show-pwd {
  position: absolute;
  right: 10px;
  font-size: 16px;
  color: $dark_gray;
  cursor: pointer;
  user-select: none;
}
</style>